<template>
  <div>
    <p v-if="tip" style="color: hotpink;text-align: center;font-size: 30px">
      请输入需要查询的用户
    </p>
    <p
      v-else-if="loading"
      style="color: hotpink;text-align: center;font-size: 30px"
    >
      loading...
    </p>
    <p
      v-else-if="none"
      style="color: hotpink;text-align: center;font-size: 30px"
    >
      查无此人
    </p>
    <!--卡片-->
    <div v-else class="row">
      <div class="card" v-for="user in users" :key="user.id">
        <a :href="user.home">
          <img :src="user.avatar" style="width: 100px" />
        </a>
        <p class="card-text">{{ user.name }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex';
export default {
  name: 'list',
  computed: {
    ...mapState(['tip', 'loading', 'none']),
    ...mapGetters(['users']),
  },
};
</script>

<style scoped></style>
